<template>
  <div class="container">
    <el-row :gutter="20">
      <template v-if="apiList.length > 0">
        <el-col :xs="24" :sm="12" :md="6" :lg="6" v-for="(item, index) in apiList" :key="index">
          <el-card class="mg-t-20 fs-14 api-list-item">
            <div slot="header">
              <el-tooltip effect="dark" :content="item.apiName" placement="top">
              <span @click="goLinks('/interface/' + item.id)" class="api-title fs-18 pointer overflow_omit">
                {{ item.apiName }}
              </span>
              </el-tooltip>
              <el-tag v-if="item.apiStatus == '1'" type="success" size="mini" class="api-status">正常</el-tag>
              <el-tag v-else-if="item.apiStatus == '2'" type="warning" size="mini" class="api-status">维护</el-tag>
              <el-tag v-else-if="item.apiStatus == '3'" type="danger" size="mini" class="api-status">停用</el-tag>
              <el-button style="float: right; padding: 3px 0" type="text" @click="feedback(item.apiName)">问题反馈</el-button>
            </div>
            <div class="pointer api-content text-line-height" @click="goLinks('/interface/' + item.id)" v-html="item.apiIntroduce"></div>
          </el-card>
        </el-col>
      </template>
      <template v-else>
        <el-col :span="24">
          <el-empty :image-size="200" :description="'暂无数据'"></el-empty>
        </el-col>
      </template>
    </el-row>

    <!-- 问题反馈窗口 -->
    <el-dialog
      :title="dialogTitle + ' - 接口问题反馈'"
      :visible.sync="dialogVisible"
      :before-close="exitDialog"
      width="30%"
      center>
      <el-form ref="form" :model="form">
        <el-form-item prop="type">
          <el-select v-model="form.type" placeholder="请选择联系方式">
            <el-option
              v-for="(item,index) in NAV_CONTACT_INFORMATION"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="contacts">
          <el-input v-model="form.contacts" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item prop="feedbackContent">
          <el-input
            type="textarea"
            placeholder="请输入需要反馈的问题"
            v-model="form.feedbackContent"
            maxlength="100"
            show-word-limit
            resize="none"
            rows="5"
          >
          </el-input>
        </el-form-item>
    </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="exitDialog">取 消</el-button>
        <el-button type="primary" @click="exitDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  layout: "navigation",
  computed: {
    ...mapState({
      nav_config: state => state.config,
      isLogin: state => state.user.isLogin
    })
  },
  //SEO优化
  head(){
    return{
      title: "API接口" + this.nav_config.separate + this.nav_config.name,
      meta: [
        { name: 'keywords', content: this.nav_config.keywords },
        { hid: 'description', name: 'description', content: "为您提供在线免费的API接口" },
      ]
    }
  },
  data(){
    return{
      apiList: [],
      // 问题反馈内容
      form: {
        type: '',
        contacts: '',
        feedbackContent: ''
      },
      // 问题反馈窗口
      dialogVisible: false,
      // 问题反馈窗口标题
      dialogTitle: "",
    }
  },
  async asyncData(e) {
    let NAV_CONTACT_INFORMATION;
    // 获取字典
    await e.app.$api_dict.getDictInfo("nav_contact_information").then(res => {
      if(res.code === 200){
        NAV_CONTACT_INFORMATION = res.data;
      }
    });
    return {
      NAV_CONTACT_INFORMATION: NAV_CONTACT_INFORMATION
    };
  },
  mounted() {
    this.getApiList();
  },
  methods: {
    // 获取接口列表
    getApiList(){
      this.$api_interface.getList().then(res => {
        if(res.code === 200){
          this.apiList = res.rows;
        }
      });
    },
    // 路由跳转
    goLinks(url){
      this.$router.push(url);
    },
    // 打开反馈窗口
    feedback(title){
      if(this.isLogin){
        this.dialogTitle = title;
        this.dialogVisible = true;
      }else{
        this.$router.push("/login?msg=您还未登录，请登录后再进行操作&redirect=" + this.$route.path);
      }
    },
    // 关闭弹窗
    exitDialog(){
      this.dialogVisible = false;
      this.resetForm();
    },
    // 重置表单
    resetForm(){
      this.form = {
        type: '',
        contacts: '',
        feedbackContent: ''
      };
    }
  }
}
</script>

<style scoped>
.api-title{
  display: inline-block;
  width: auto;
  max-width: 120px;
}
.api-status{
  position: relative;
  top: -3px;
}
.api-list-item{
  min-height: 155px;
}
.api-content{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>
